<template>
  <section class="team">
    <sub-header></sub-header>
    <div class="row inner small-up-1 medium-up-3 large-up-3 inner-list">
      <div class="column" v-for="(item, index) in articleList">
        <div @click="productPreview(item.id)" class="img">
          <a>
            <picture>
              <source :srcset="item.productImageUrl
" media="(min-width: 600px)"> 
              <img :src="item.productImageUrl" :alt="item.name"/>
            </picture>
            <p class="no-margin">{{item.description}}</p>
          </a>
        </div>
        <div class="name">
          <router-link :to="{ name: 'products', params: { arId: item.id }}">
            {{item.name}}
          </router-link>
        </div>
      </div>
    </div>
    <div class="row margin-t text-center">
      <el-pagination
        small
        @current-change="changePage"
        layout="prev, pager, next"
        :page-count="data ? data.totalPage : 0">
      </el-pagination>
    </div>
    <product-preview :articleList="articleList" :dialogVisible="preview" :arId="arId" @close="preview = false"></product-preview>
  </section>
</template>
<script>
  import { fetchProductList } from '../../api'
  import SubHeader from '@/components/SubHeader'
  import ProductPreview from '@/components/ProductPreview'
  export default {
    data () {
      return {
        articleList: [],
        data: null,
        preview: false,
        arId: null,
        currPage: 0
      }
    },
    created () {
      this.getArticleList()
    },
    methods: {
      changePage (currentPage) {
        this.currPage = currentPage - 1
        this.getArticleList()
      },
      getArticleList () {
        var param = {
          "pageNumber": this.currPage,
          "params": {
            "catalogId": parseInt(this.$route.params.id)
          }
        }
        fetchProductList(param).then((res) => {
          this.data = res.data
          this.articleList = res.data.content
        })
      },
      productPreview (id) {
        this.arId = id
        this.preview = true
      }
    },
    watch: {
      $route (nv) {
        this.getArticleList()
      }
    },
    components: {
      SubHeader,
      ProductPreview
    }
  }
</script>
<style>
  @import 'css/variable.css';
  .inner-list {
    & .img{
      & a{
        position: relative;
        display: block;
        border-top: 1px solid #f3f3f3;
        box-shadow: 0 1px 1px #d7e4ed;
        &:before{
          content: '';
          position: absolute;
          height: 100%;
          width: 100%;
          background: rgba(0,0,0,.6);
          opacity: 0;
          transition: all .4s;
        }
        & p {
          position: absolute;
          left: 0;
          bottom: 0;
          font-size: 12px;
          opacity: 0;
          transform: translateY(10px);
          transition: all .3s ease .1s;
          padding: 10px;
          color: #fff;
        }
      }
      &:hover a:before{
        opacity: 1;
      }
      &:hover p {
        opacity: 1;
        transform: translateY(0);
      }
    }
    & .name{
      text-align: center;
      padding: 10px;
    }
  }
</style>